<template>
  <div class="ict-menber-view">
    <div class="menberBuy" v-touch:tap="buy" v-el:btn>
      <p class="buyBtn">友情价 ¥149 <span class="del">¥199</span></p>
    </div>
    <scroller :lock-x="true" scrollbar-y v-ref:scroller :height.sync="scrollerHeight">
      <div>
        <div class="banner" v-el:banner>
          <div v-touch:tap="goHome" class="go-home">首页</div>
          <div v-touch:tap="goQR" class="QRcode">
            <img src="../../../static/image/menber/QRicon.png" alt="">
            <div class="">分享</div>
          </div>
          <img src="../../../static/image/menber/banner1.png" alt="">
        </div>
        <div class="scrollerImg" v-el:img>
          <img src="../../../static/image/menber/scroller.png" alt="">
        </div>
        <div class="financial">
          <div class="tit">
            来长投学赚钱
          </div>
          <div class="con">
            <span style="color:#34ace0;">如果</span>你总是入不敷出，感觉钱不够用
            <br><span style="color:#34ace0;">如果</span>你工作了两三年，依旧经常月光
            <br><span style="color:#34ace0;">如果</span>你仅知道余额宝，想了解更多
            <br><span style="color:#34ace0;">如果</span>你想成为一个有钱人，想知道更多的赚钱方式，想知道富人的思维，一定不要错过我们，错过改变自己道路的机会。
            <img src="../../../static/image/menber/financial.png" alt="">
            <br><br>7年来,已经超过<span class="strong">200000+</span>院生从长投学堂毕业,了解不一样的思维,系统学习理财的正确姿势
          </div>
          <div class="tit">
            这是他们的故事
          </div>
          <div class="con">
            <ul>
              <li v-touch:tap="one" class="btnS">投资需趁早靠着投资改变生活</li>
              <li v-touch:tap="two" class="btnS">单身狗月定投 五年后买房</li>
            </ul>
          </div>
          <div class="tit">
            特权介绍
          </div>
          <div class="con">
            长投学堂推出了合伙人计划，第一期名额仅有<span style="color:#34ace0;">50名</span>，学习后可以获得奖学金哦。
          </div>
        </div>
        <div class="privilege">
          <div class="partnerTitle">合伙人特权</div>
          <div class="line"></div>
          <ul>
            <li>目前付费149元即可成为合伙人，有效期365天，可享受以下权益：</li>
            </br>
            <!-- <li>1.获得价值50元的投币，可以购买长投任意课程时抵扣。</li>
            </br> -->
            <li>1.成为长投合伙人后，完成课程后即可享受课程花费金额的20%返现奖学金。</li>
            </br>
            <li>2.额外149元的免费听额度，合伙人专属线上微课免费听。</li>
          </ul>
          <img src="../../../static/image/menber/privilege.png" alt="">
        </div>
        <div class="sharePartner">
          <div class="partnerTitle">合伙人推广计划</div>
          <div class="line"></div>
          <ul>
            <li>1.每邀请1名新用户参与合伙人计划即可获得79元现金奖励。每邀请5名新用户人额外获得100元现金奖励。</li>
            </br>
            <li>2.邀请用户来长投学堂学习课程，合伙人（邀请人）会拿到课程花费的40%返现；被邀请人学完课程，返现10%作为奖学金。</li>
          </ul>
          <img src="../../../static/image/menber/sharePartner.png" alt="">
        </div>
      </div>
    </scroller>
  </div>
</template>

<script>
import Badge from 'vux/badge'
import IctTitlebar from '../../components/IctTitleBar.vue'
import IctButton from '../../components/IctButton.vue'
import IctItem from '../../components/IctItemButton.vue'
import {Flexbox, FlexboxItem} from 'vux/flexbox'
import Scroller from 'vux/scroller'
import {MSITE_URL} from '../../frame/serverConfig'
import {userGetters, menberGetters} from '../../vuex/getters'
import {dealType, pay, transactionChannel} from '../../util/pay/dealHelper'
import {Device, platformMap} from '../../plugin/device'
import {Agent} from '../../plugin/agent'
import {partnerBinding} from '../../vuex/menber/actions'
import ictData from '../../statistics/ictData'
import {statisticsMap} from '../../statistics/statisticsMap'

export default {
  vuex: {
    actions: {
      partnerBinding: partnerBinding
    },
    getters: {
      userName: userGetters.userName,
      userId: userGetters.userId,
      isLogin: userGetters.isLogin,
      isMenberLegal: menberGetters.isMenberLegal
    }
  },
  data () {
    return {
      scrollerHeight: '600px'
    }
  },
  route: {
    data () {
      //统计进入页面
      ictData.track(statisticsMap.PARTNER_TO_MENBER_RECOMMEND, {'受访页面': window.location.href, '访问页面': '#' + window.location.href.split('!')[1], '被邀请id': this.userId, '邀请人id': this.$route.query.userid ? this.$route.query.userid : '0'})
      this.setViewWxShareConfig ()
      setTimeout (() => {
        this.setViewWxShareConfig()
      }, 2000)
      // console.log('userid', this.$route.query.userid);
      setTimeout (() => {
        this.setScrollerHeight()
      }, 100)
    }
  },
  methods: {
    /**
     * 设置滚动条高度
     */
    setScrollerHeight () {
      // 设置滚动条高度为 页面高度-titlebar高度-tabbar高度
      const me = this
      const {btn} = this.$els
      // const {tabBar} = me.$parent.$els

      me.scrollerHeight = (window.document.body.offsetHeight - btn.offsetHeight) + 'px'
      setTimeout(function () {
        me.$nextTick(() => {
          me.$refs.scroller.reset({
          top: 0
        })
      })
      }, 150)
    },
    one () {
      this.$router.go('/interview-record?id=7')
    },
    two () {
      this.$router.go('/interview-record?id=2')
    },
    // 支付失败
    onPayFail (err) {
      this.hideLoading()
      Object.assign(this.statisticData, {
        '原因': err.reason
      })
    },
    /**
     * 取出参数
     */
    // getQueryString(name) {
    //   var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    //   var r = window.location.search.substr(1).match(reg);
    //   if (r != null) return unescape(r[2]);
    //   return null;
    // },
    /**
     * 设置分享选项
     */
    setViewWxShareConfig () {
      this.shareConfig = {
        title: '加入合伙人',
        desc: '加入合伙人',
        link: `${MSITE_URL}index.html#!/menber-recommend?userid=${this.userId}`,
        imgUrl: ``
      }
      this.onViewChange()
      // window.alert(this.shareConfig.link)
      // window.alert('设置分享')
      console.log('setViewWxShareConfig设置分享选项');
    },
    goHome () {
      // window.history.back()
      this.$router.go('/main')
    },
    goQR () {
      window.sessionStorage.setItem('urlQRcode', `menber-recommend?`)
      this.$router.go('/menber-recommend-qr')
    },

    buy () {
      if (!this.isLogin) {
        this.showAlert('请登录或注册')
        this.$router.go('/entry')
      } else if (this.isMenberLegal) {
        window.alert('您已经是合伙人')
      } else {
        this.payByChannel('wechat')
      }
    },

    payByChannel (channel) {
      this.showLoading()
      //根据环境判断合伙人价格
      let price = 149
      if (MSITE_URL === 'https://h5.ichangtou.com/partner/') {
        price = 149
      } else if (MSITE_URL === 'https://h5test.ichangtou.com/xia/partner/') {
        price = 0.01
      }
      // Object.assign(this.statisticData, {
      //   '支付方式': Device.platform === platformMap.WEB ? channel === 'wechat' ? '微信-web' : '支付宝-web' : channel === 'wechat' ? '微信-app' : '支付宝-app',
      //   '入口页': getLocalCache('statistics-entry-page') && getLocalCache('statistics-entry-page').entryPage
      // })

      // if (Device.platform === platformMap.WEB && Agent.isWx && parseInt(this.sum) >= 3000) {
      //   setLocalCache('isZhoulePay', true)
      // }

//      this.$dispatch(eventMap.STATISTIC_EVENT, statisticsMap.PAY_CONFIRM_TAP, {})
      const me = this
      const trade = {
        sum: price,
        body: '长投合伙人',
        openId: Device.platform === platformMap.WEB && Agent.isWx ? parseInt(price) >= 3000 ? JSON.parse(window.sessionStorage.getItem('zhouLe')).openId : JSON.parse(window.sessionStorage.getItem('wxOauth2')).openId : null,
        deal: {
          cardUsed: false,
          channel: (Device.platform === platformMap.ANDROID || Device.platform === platformMap.IOS) ? 'APP' : 'MAPP',
          items: [{
            coupon: null,
            dealType: dealType.BUY,
            itemId: 1,
            mchantType: 12,
            misc: '',
            price: price
          }]
        }
      }

      pay({
        channel: channel,
        trade: trade
      }).then(
        result => {
          this.hideLoading();
          // 绑定上线 parentId
          let param = {};
          param.parentId = this.$route.query.userid;
          this.partnerBinding(JSON.stringify(param));
          window.alert('支付成功');
          // this.updateMenber();
          this.$route.router.go('/menber-info');
          window.location.reload();
          if (result && result.type && (result.type === transactionChannel.WX_CODE)) {
            // 扫码支付
            // me.showCodePanel(result.url)
          } else {
            // 其他支付 （不包括支付宝网页支付）
            // me.goToPaySuccess()
          }
        }
      ).catch(
        (err) => me.onPayFail(err)
      )
    }
  },
  components: {
    IctTitlebar,
    IctButton,
    IctItem,
    Flexbox,
    FlexboxItem,
    Badge,
    Scroller
  }
}
</script>
<style lang="less">
  @import "../../assets/styles/icon.less";
  .ict-menber-view{
    p {
      margin: 0;
    }
    .ict-item:active {
      background-color: #ccc;
      color:black;
    }
    .into-icon:before{
      font-family: 'myicon';
      content: '\e913';
      color: #898989;
    }
    .ict-btn{
      width: 6.5rem;
      height: 1.8rem;
      border: 1px solid #00b0f0;
      border-radius: 5px;
      background: #fff;
      min-height: 0;
      padding: 0;
      color: #00b0f0;
      font-size: 0.85rem;
    }
    .itemOnFocus{
      background-color: black;
      color: white;
    }
  }
  .banner {
    .QRcode {
      display:flex;
      img {
        flex: 1;
        width:1rem;
        height:1rem;
        line-height:1rem;
      }
      div {
        flex: 3;
      }
      height:1rem;
      line-height:1rem;
      color: white;
      top:0.5rem;
      left: 1rem;
      font-size: 12px;
      position:absolute;
      z-index: 2;
    }
    .go-home {
      color: white;
      top:0.5rem;
      right: 1rem;
      font-size: 12px;
      position:absolute;
      z-index: 2;
    }
    img {
      width: 100%;
    }
  }
  .privilege {
    color:#aaa;
    /*height: 15rem;*/
    background-color: white;
    margin:0 0.5rem 0 0.5rem;
    text-align:left;
    font-size:12px;
    padding:0.5rem;
    ul {
      list-style-type:none;
      width:70%;
      margin: 0 auto;
    }
    img {
      width:100%;
    }
  }
  .menberBuy {
    width:100%;
    bottom:0;
    position:fixed;
    z-index:10;
    /*padding:0.5rem;*/
    font-size:12px;
    text-align:center;
    background-color: white;
    .del {
      text-decoration: line-through;
      color:#e0e0e0;
    }
  }
  .scrollerImg {
    text-align: center;
    margin-bottom:-0.4rem;
    img {
      width:95%;
    }
    height:1rem
  }
  .sharePartner {
    color:#aaa;
    /*height: 15rem;*/
    background-color: white;
    margin:0 0.5rem 0 0.5rem;
    text-align:center;
    font-size:12px;
    padding:0.5rem;
    text-align:left;
    ul {
      list-style-type:none;
      width:70%;
      margin: 0 auto;
    }
    img {
      width:100%;
    }
  }
  .partnerTitle {
    margin:2rem;
    text-align:center;
  }
  .line {
    height:1px;
    background-color:#F2F2F2;
    margin:2rem;
  }
  .financial {
    margin: 0.5rem;
    background-color: white;
    color: #34ace0;
    /*width: 100%;*/
    text-align: center;
    .tit {
      padding: 1.5rem;
      padding-bottom: 1rem;
      font-size: 0.8rem;
    }
    .con {
      color: #aaa;
      width: 70%;
      margin: 0 auto;
      text-align: left;
      padding-bottom: 1rem;
      line-height: 1.5rem;
    }
    img {
      width: 100%;
      background-color: white;
    }
  }
  .strong {
    color: #de3d3d;
    font-size: 0.9rem;
  }
  .btnS {
    text-decoration: underline;
    line-height: 2.5rem;
  }
  .buyBtn {
    color:white;
    height:44px;
    line-height:44px;
    background-color:#00b0f0;
    /*border-radius: 5px;*/
  }
</style>
